<style>
    .ly-step{
        margin-bottom: 20px;
        padding-right: 20px;
        font-size: 14px;
        color: #667586;
        text-align: center;
        line-height: 40px;
        display: flex;
        flex-flow: row;
    }


    .ly-step .ly-step-item {
        position: relative;
        height: 40px;
        background-color: rgba(239,242,247,1);
        flex: 1;
    }
    .ly-step  .ly-step-item.active {
        background-color: var(--primary);
        color: #FFFFFF;
    }

    .ly-step  .ly-step-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border: 20px solid #ffffff;
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }
    .ly-step  .ly-step-right {
        position: absolute;
        top: 0;
        right: -40px;
        width: 0;
        height: 0;
        border: 20px solid rgba(239,242,247,1);
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }
    .ly-step .ly-step-item.active  .ly-step-right {
        border-left-color: var(--primary);
    }

    .ly-step .ly-step-item i{
        margin-right: 10px;
    }
</style>
<template>
    <div class="ly-step">
        <slot>

        </slot>
    </div>
</template>
<script>
    //这里定义组件
    Rap.define('', [], {
        name: 'ly-steps',
        props: {
            value: {
                'default': 1
            }
        },
        watch: {
            'value': function (value) {
                this.computeCheck(value);
            }
        },
        data: function () {
            return {
                check_steps_id: 1
            }
        },
        mounted:function () {
            this.computeCheck(this.value);
        },
        methods: {
            computeCheck:function (value) {
                var children = this.$children;
                for(var i=0;i<children.length;i++){
                    var child=children[i];
                    child.computeCheck(value,children.length,i);
                }
            }
        }
    })
</script>